<script setup>
import axios from "axios";
import * as echarts from "echarts";
import {markRaw, onMounted, ref} from "vue";

const bar = ref()
const myChart = ref()
const option = ref({})
const data = ref()
const init = async () => {
  await axios.get('http://127.0.0.1:5000/bar').then(res => {
    data.value = res.data
  })
  myChart.value = markRaw(echarts.init(bar.value));
  draw();
}
const draw = () => {
  option.value = {
    baseOption: {
      timeline: {
        //loop: false,
        axisType: 'category',
        show: true,
        autoPlay: true,
        playInterval: 3000,
        data: data.value.data.map(value=>value[0])
      },
      title: {
        text: '各省市不同年份的农林牧渔业增加值',
        textStyle: {
          color:'#ffffff'
        },
        left: 'center',
        top:'3%'
      },
      legend: {
        left: '5%',
        bottom:'5%',
        type: 'scroll',
        width: '140',
        textStyle:{
          color:'#ffffff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '20%',
        top: '20%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: data.value.year,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel:{
            rotate:45
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series:  {
          type: 'bar',
          stack: 'total',
          barWidth: '60%'
        }
    },
    options: data.value.data.map((value) => {
      return {
        series: {
          name:value[0],
          data: value.slice(1),
        }
      }
    })
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})

</script>

<template>
  <div class="bar" ref="bar"></div>
</template>

<style scoped>
.bar {
  width: 100%;
  height: 100%;
}
</style>